<template>
	<view class="service-order">
		<!--用户 服务订单 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view class="" slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">服务订单</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<view class="w-100 bg-ff b-box">
				<view class="d-flex flex-r ali-i-c just-c b-box bg-ff" style="height: 92rpx;width: 750rpx;">
					<u-tabs
						:list="TabList"
						lineColor="#FFD300"
						@click="tabsClick"
						@change="tabsClick"
						:inactiveStyle="{
							color: '#666666',
							fontSize: '32rpx',
							fontWeight: '400',
							fontFamily: 'PingFang SC'
						}"
						:activeStyle="{
							color: '#262626',
							fontSize: '32rpx',
							fontWeight: '500',
							fontFamily: 'PingFang SC'
						}"
						lineWidth="36rpx"
						:lineBottom="'12rpx'"
						:itemStyle="{ height: '88rpx', backgroundColor: 'rgba(255,255,255,0)' }"
						:current="TabCurrent"
						lineHeight="6rpx"
					></u-tabs>
				</view>
			</view>
			<!-- list -->
			<!-- swiper tabs标签 -->
			<view style="margin-top:20rpx ;" :class="show ? 'show' : ''">
				<view class=" d-flex flex-c just-s ali-i-c">
					<view class="" v-if="dataList.length > 0">
						<service-order-card
							@Contact="Contact"
							@Replace="Replace"
							@UserCancle="UserCancle"
							@ApplyForRefund="ApplyForRefund"
							@zdshifu="zdshifu"
							@CancelOrder="CancelOrder"
							@PayOrder="PayOrder"
							@Evaluate="Evaluate"
							@ReleaseInformation="ReleaseInformation"
							@ConfirmCompletion="ConfirmCompletion"
							v-for="(item, index) of dataList"
							:key="index"
							:staffList="item"
						/>
					</view>
					<!-- 空状态 -->
					<view
						class=" d-flex flex-c ali-i-c just-c"
						:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
						v-else
					>
						<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
							数据为空
						</text>
					</view>
				</view>
			</view>
		</view>
		<u-picker
			:show="pickerShow"
			cancelColor="#999999"
			confirmColor="#333333"
			@cancel="close"
			@close="close"
			@confirm="confirm"
			@change="change"
			title="指定师傅"
			:columns="columnData"
			:itemHeight="82"
			:defaultIndex="[2]"
			keyName="username"
		></u-picker>

		<Contact-the-customer
			ref="customModel"
			:show="ModelShow"
			:top="'30rpx'"
			:confirmText="confirmText"
			:success="ModelStatus"
			:cancelText="cancelText"
			:height="height"
			:width="width"
			:borderColor="borderColor"
			:color="color"
			@ModelCancel="ModelCancel"
			:showCloseIcon="showCloseIcon"
			@cancel="ModelCancel"
			@confirm="ModelConfirm"
			:title="ModelTitle"
		/>

		<view>
			<!-- popup -->
			<u-popup
				:show="show"
				mode="bottom"
				overlayOpacity="0.6"
				:round="25"
				@close="close"
				@open="open"
			>
				<view class=" d-flex flex-c ali-i-s just-s b-box" style="padding: 40rpx 0;">
					<!-- title -->
					<view class="d-flex flex-r ali-i-c just-c w-100 b-box po-re">
						<text class="fw-500 pf-sc fw-500" style="font-size: 32rpx;">选择支付方式</text>
						<text
							class="fw-500 pf-sc fw-500 po-ab"
							style="font-size: 32rpx; right:42rpx"
							@click="close"
						>
							×
						</text>
					</view>
					<!--  -->
					<view
						class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
						@click="Select = 2"
						style="height: 120rpx;border-bottom: 2rpx solid #dedede;padding: 0 36rpx 0 32rpx;"
					>
						<view class="d-flex flex-r ali-i-c just-s">
							<image
								:src="require('../static/hy2.png')"
								style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
							></image>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">余额支付</text>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">
								（￥{{ user.money }}）
							</text>
						</view>
						<view v-if="Select === 2">
							<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
						</view>
					</view>
					<view
						class=" d-flex flex-r ali-i-c just-sw w-100 b-box"
						@click="Select = 1"
						style="height: 120rpx;border-bottom: 2rpx solid #dedede;margin-bottom: 60rpx;padding: 0 36rpx 0 32rpx;"
					>
						<view class="d-flex flex-r ali-i-c just-s">
							<image
								:src="require('../static/hy3.png')"
								style="width: 56rpx;height: 56rpx;margin-right: 16rpx;"
							></image>
							<text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">微信支付</text>
							<!-- <text class="fw-400 pf-sc c-333" style="font-size: 30rpx;">（2次可用）</text> -->
						</view>
						<view v-if="Select === 1">
							<image :src="require('../static/xz.png')" style="width: 36rpx;height: 36rpx;"></image>
						</view>
					</view>
					<!-- btn -->
					<view class="d-flex flex-r ali-i-c just-c w-100 b-box" style="margin-bottom: 12rpx;">
						<u-button
							@click="SubMitOrder"
							:customStyle="{
								height: '88rpx',
								width: '670rpx',
								font: '500 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="确定"
						></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import {
	xcoderlist,
	canclexcorder,
	paycxorder,
	workerorpublish,
	querenxcorder,
	getworkermobile,
	usercancleorder
} from '@/common/api.js';
import ContactTheCustomer from '../components/Contact-the-customer/Contact-the-customer.vue';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
import uTabs from '../components/uview-ui/components/u-tabs/u-tabs';
import serviceOrderCard from '../components/serviceOrderCard/serviceOrderCard';
import uPopup from '../components/uview-ui/components/u-popup/u-popup';
export default {
	components: {
		'u-navbar': Unavbar,
		'u-button': Ubutton,
		'u-tabs': uTabs,
		'u-popup': uPopup,
		'service-order-card': serviceOrderCard
	},
	data() {
		return {
			// 模态框
			shopId: '',
			Select: '',
			user: uni.getStorageSync('userInfo'),
			show: false,
			ModelShow: false,
			ModelStatus: false, //客服
			ModelTitle: '',
			confirmText: '',
			cancelText: '',
			borderColor: '',
			color: '',
			height: '',
			width: '',
			showCloseIcon: '',
			oid: '',
			type: 0,
			teight: '',
			listHeight: '',
			columnData: [],
			TabList: [
				{
					id: 0,
					name: '全部订单'
				},
				{
					id: 1,
					name: '待支付'
				},
				{
					id: 2,
					name: '待接单'
				},
				{
					id: 3,
					name: '待服务'
				},
				{
					id: 4,
					name: '已完成'
				}
			],
			pickerShow: false, //选择器开关
			columnData: [],

			TabCurrent: 0, //当前选中标签的索引
			dataList: [],
			page: 1
		};
	},

	onPullDownRefresh() {
		this.page = 1;
		this.tabsClick();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		console.log('到底了');
		this.page = this.page + 1;
		this.tabsClick();
	},
	methods: {
		//弹框
		open() {
			this.show = true;
		},
		close() {
			this.pickerShow = false;
			this.show = false;
		},
		ReleaseInformation(data) {
			uni.navigateTo({
				url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + data.id
			});
		},
		//刚进来加载的首页数据
		getList() {
			let params = {
				token: uni.getStorageSync('usertoken'),
				type: this.type,
				page: 1
			};
			xcoderlist(params).then(res => {
				console.log(res);
				this.dataList = res.data.data;
			});
		},

		confirm() {
			this.close();
		},
		//超时更换师傅
		Replace(data) {
			console.log(data);

			uni.navigateTo({
				url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + data.id
			});
		},
		Evaluate(data) {
			//去评价
			console.log(data);
			uni.navigateTo({
				url: `/userModelA/userC/Evaluate/Evaluate?id=${data.id}&orderno=${data.orderno}&catimage=${
					data.catimage
				}&money=${data.money}&cardetail=${data.cardetail}&catname=${data.catname}`
			});
		},
		ApplyForRefund(data) {
			//申请退款
			console.log(data.xcstatus, data.id);
			if (data.xcstatus == 2) {
				// 申请退款把数据传过去
				uni.setStorageSync('RefundMoney', data);
				uni.navigateTo({
					url: `/userModelA/userC/ApplyForRefund/ApplyForRefund?id=${data.id}`
				});
			}
		},
		PayOrder(data) {
			this.shopId = data.id;
			this.open();
		},

		SubMitOrder() {
			console.log(this.shopId, this.Select);
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: this.shopId,
				paytype: this.Select
			};

			if (this.Select != 1 && this.Select != 2) {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
				return;
			}

			if (this.Select == 1) {
				let _this = this;
				paycxorder(params).then(res => {
					console.log(res.data.data, '带娃带娃');
					var paydata = res.data.data;
					uni.requestPayment({
						provider: 'wxpay',
						// "orderInfo": {  },
						// "appid":paydata.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
						nonceStr: paydata.nonceStr, // 随机字符串
						package: paydata.package, // 固定值
						partnerid: '1629006880', // 微信支付商户号
						prepayid: params.id, // 统一下单订单号
						timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
						paySign: paydata.paySign, // 签名，这里用的 MD5/RSA 签名
						signType: paydata.signType, // 签名算法
						success(res) {
							if (res.errMsg == 'requestPayment:ok') {
								uni.navigateTo({
									url: '/userModelA/userA/PaySuccess/PaySuccess?oid=' + params.id
								});
								_this.show = false;
							}
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: e,
								icon: 'none'
							});
						}
					});
				});
			} else if (this.Select == 2) {
				paycxorder(params).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
						this.show = false;
						setTimeout(() => {
							uni.navigateTo({
								url: `/userModelA/userA/PaySuccess/PaySuccess?oid=${res.data.data.oid}`
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			} else {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
			}
		},
		ConfirmCompletion(data) {
			console.log(data);
			if (data.worerstatus != 5) {
				return uni.showToast({
					title: '师傅还未完成该订单',
					icon: 'none'
				});
			}
			uni.showModal({
				title: '提示',
				content: '您确定师傅完成了该订单吗',
				success: res => {
					if (res.confirm) {
						let params = {
							token: uni.getStorageSync('usertoken'),
							id: data.id
						};
						querenxcorder(params).then(res1 => {
							if (res1.data.code === 1 && data.worerstatus == 5) {
								uni.showToast({
									title: '操作成功',
									icon: 'none'
								});
								this.tabsClick();
							} else {
								return uni.showToast({
									title: res1.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		CancelOrder(data) {
			//取消订单
			console.log(data.xcstatus);
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: data.id
			};

			//只有当订单状态为待支付的时候可以取消订单
			if (data.xcstatus == 0) {
				uni.showModal({
					title: '提示',
					content: '您确定要取消该订单吗？',
					success: res => {
						if (res.confirm) {
							canclexcorder(params).then(res => {
								console.log(res);
								if (res.data.code === 1) {
									uni.showToast({
										title: '订单取消成功',
										icon: 'none'
									});
									this.tabsClick();
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						} else if (res.cancel) {
						}
					}
				});
			}
		},
		UserCancle(data) {
			//取消订单 待接单的情况下的订单
			uni.showModal({
				title: '提示',
				content: '您确定要取消该订单吗？',
				success: res => {
					if (res.confirm) {
						let params = {
							token: uni.getStorageSync('usertoken'),
							id: data.id
						};
						usercancleorder(params).then(res1 => {
							if (res1.data.code === 1) {
								uni.showToast({
									title: '订单取消成功',
									icon: 'none'
								});
								this.tabsClick();
							} else {
								uni.showToast({
									title: res1.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
					}
				}
			});
		},
		Contact(data) {
			//联系客服
			let params = {
				token: uni.getStorageSync('usertoken'),
				id: data.id
			};
			getworkermobile(params).then(res => {
				if (res.data.code == 1) {
					uni.makePhoneCall({
						phoneNumber: res.data.data //仅为示例
					});
				}
			});
		},
		ModelCancel() {
			//关闭模态框
			this.ModelShow = false;
		},
		ModelConfirm() {
			this.ModelShow = false;
			uni.makePhoneCall({
				phoneNumber: `${this.ModelTitle}`,
				complete(e) {
					console.log(e);
				}
			});
		},
		ClearRefre_() {
			for (let index = 0; index < 3; index++) {
				this.$set(this, `refresher_triggered${index}_`, false);
			}
		},

		tabsClick(index) {
			if (index) {
				this.page = 1;
				this.dataList = [];
				this.TabCurrent = index.id;
				this.ClearRefre_();
			}

			//此处根据状态码再发一次请求

			let params = {
				token: uni.getStorageSync('usertoken'),
				type: this.TabCurrent,
				page: this.page
			};
			xcoderlist(params).then(res => {
				var data = res.data;
				if (data.data.length > 0) {
					if (this.page == 1) {
						this.dataList = [];
						this.dataList = data.data;
					} else {
						this.dataList = this.dataList.concat(...data.data);
						console.log(this.dataList.length);
					}
				} else {
					if (this.page > 1) {
						uni.showToast({
							icon: 'none',
							title: '暂无更多内容'
						});
						this.page = this.page - 1;
					}
				}
			});
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.listHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('118rpx'), 'px');
		// this.ReauestMethod();
		this.tabsClick();
	},
	onShow() {}
};
</script>

<style lang="scss">
.service-order {
	.u-toolbar {
		background-color: #f4f4f4 !important;
	}

	.u-toolbar__wrapper__cancel {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.u-toolbar__wrapper__confirm {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.u-toolbar__title {
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.u-picker__view__column__item {
		background-color: #fff;
		line-height: 68rpx !important;
	}
	.show {
		overflow: hidden !important;
		position: fixed !important;
		height: 100vh;
		width: 100%;
	}
}
</style>
